<template>
    <div>
        <el-row>
            <el-col :span="8" align="left">
                <span>用户ID：</span>
                <el-input placeholder="请输入用户ID" v-model="customerId" clearable></el-input>
            </el-col>
            <el-col :span="8" align="left">
                <span>购买会员：</span>
                <el-input placeholder="请输入购买会员" v-model="customerName" clearable></el-input>
            </el-col>
            <el-col :span="8" align="left">
                <span>收货人电话：</span>
                <el-input placeholder="请输入收货人电话" v-model="receiverPhone" clearable></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" align="left">
                <span>下单时间:</span>  
                <el-date-picker
                    v-model="time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </el-col>
            <el-col :span="12" align="left">
                <span>订单状态:</span>  
                <el-select v-model="orderStatusList" clearable multiple placeholder="请选择投资方式">
                    <el-option
                    v-for="item in orderStatusListArray"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="4">
                <el-button type="success" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出数据</el-button>
            </el-col>
        </el-row> 
        <el-table
            :data="table"
            v-loading="tableLoading"
            border
            stripe 
            size="small"
            height="500"
            style="width: 100%">
            <el-table-column
                fixed="left"
                label="商品名称"
                prop="goodsName"
                align="center"
                :show-overflow-tooltip="true"
                width="150">
            </el-table-column>  
            <el-table-column
                fixed="left"
                label="订单状态"
                prop="orderStatus"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                fixed="left"
                label="订单号"
                prop="orderNumber"
                align="center"
                width="200">
            </el-table-column>  
            <el-table-column
                fixed="left"
                label="客户姓名"
                prop="customerName"
                align="center"
                width="100">
            </el-table-column> 
            <el-table-column
                label="用户Id"
                prop="customerId"
                align="center"
                width="80">
            </el-table-column>
            <el-table-column
                label="商品购买数量"
                prop="buyCount"
                align="center"
                width="100">
            </el-table-column> 
            <el-table-column
                label="佣金"
                prop="commissionMoney"
                align="center"
                width="100">
            </el-table-column>  
            <el-table-column
                label="订单创建时间"
                prop="createdTime"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="更新时间"
                prop="updatedTime"
                align="center"
                width="200">
            </el-table-column> 
            <el-table-column
                label="订单过期时间"
                prop="expireTime"
                align="center"
                width="150">
            </el-table-column>   
            <el-table-column
                label="是否自提"
                align="center"
                width="120">
                <template slot-scope="scope">
                    {{scope.row.isPickUpSelf?'是':'否'}}
                </template>
            </el-table-column>
            <el-table-column
                label="商品ID"
                prop="goodsId"
                align="center"
                width="150">
            </el-table-column>          
            <el-table-column
                label="商品销售人员ID"
                prop="goodsSalemanId"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="商城销售名字"
                prop="mallSaleManName"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="记录ID"
                prop="orderId"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="支付积分"
                prop="payIntegral"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="支付金额"
                prop="payMoney"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="支付订单号"
                prop="payNumber"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="订单支付时间"
                prop="payTime"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="收货人"
                prop="receiverName"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="收货人地址"
                prop="receiverAddr"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column>  
            <el-table-column
                label="收货人电话"
                prop="receiverPhone"
                align="center"
                width="150">
            </el-table-column> 
            <el-table-column
                label="客户手机号"
                prop="telPhone"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="发货状态"
                prop="deliveryStatus"
                fixed="right"
                align="center"
                width="150">
            </el-table-column>   
            <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="150">
            <template slot-scope="scope">
                <el-button type="warning" size="mini" style="padding: 8px;margin: 2px" 
                @click="edit(scope.row)">修改信息</el-button>
                <el-button type="danger" size="mini" style="padding: 8px;margin: 2px" 
                @click="refund(scope.row)" :disabled="scope.row.orderStatus!='支付成功'">退款</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
        <el-dialog title="修改信息" :visible.sync="dialogShow" v-loading="dialogLoading" :close-on-click-modal="false" width="800px">
            <el-row>
                <el-col :span="8">用户id：{{dialog.customerId}}</el-col>
                <el-col :span="8">客户姓名：{{dialog.customerName}}</el-col>
                <el-col :span="8">商品购买数量：{{dialog.buyCount}}</el-col>
                <el-col :span="8">佣金：{{dialog.commissionMoney}}</el-col>
                <el-col :span="8">订单创建时间：{{dialog.createdTime}}</el-col>
                <el-col :span="8">更新时间：{{dialog.updatedTime}}</el-col>
                <el-col :span="8">订单过期时间：{{dialog.expireTime}}</el-col>
                <el-col :span="8">是否自提：{{dialog.isPickUpSelf?'是':'否'}}</el-col>
                <el-col :span="8">商品ID：{{dialog.goodsId}}</el-col>
                <el-col :span="8">商品名称：{{dialog.goodsName}}</el-col>
                <el-col :span="8">商品销售人员ID：{{dialog.goodsSalemanId}}</el-col>
                <el-col :span="8">商城销售名字：{{dialog.mallSaleManName}}</el-col>
                <el-col :span="8">记录ID：{{dialog.orderId}}</el-col>
                <el-col :span="8">订单号：{{dialog.orderNumber}}</el-col>
                <el-col :span="8">订单状态：{{dialog.orderStatus}}</el-col>
                <el-col :span="8">支付积分：{{dialog.payIntegral}}</el-col>
                <el-col :span="8">支付金额：{{dialog.payMoney}}</el-col>
                <el-col :span="8">支付订单号：{{dialog.payNumber}}</el-col>
                <el-col :span="8">订单支付时间：{{dialog.payTime}}</el-col>
                <el-col :span="8">收货人：{{dialog.receiverName}}</el-col>
                <el-col :span="8">收货人地址：{{dialog.receiverAddr}}</el-col>
                <el-col :span="8">收货人电话：{{dialog.receiverPhone}}</el-col>
                <el-col :span="8">客户手机号：{{dialog.telPhone}}</el-col>
                <el-col :span="8">
                    <span>发货状态：</span> 
                    <el-select v-model="dialog.deliveryStatus" placeholder="请选择发货状态" style="width:50%;">
                        <el-option
                            v-for="item in deliveryStatusArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-button type="primary" size="medium" style="padding: 8px;margin: 2px" @click="sure">确认</el-button>
                </el-col>
                <el-col :span="8"></el-col>
                <el-col :span="8"></el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
var searchInfo={
    customerId:"",
    customerName:"",
    receiverPhone:"",
    startTime:"",
    endTime:"",
    orderStatusList:"",
};
var orderId;
export default {
    data(){
        return{
            exportLoading:false,
            customerId:"",
            customerName:"",
            receiverPhone:"",
            time:"",
            tableLoading:false,
            dialogShow:false,
            dialogLoading:false,
            dialog:{},
            table:[],
            deliveryStatusArr:[
                {
                    value:'待自提',
                    label:'待自提'
                },
                {
                    value:'已自提',
                    label:'已自提'
                },
                {
                    value:'待发货',
                    label:'待发货'
                },
                {
                    value:'已发货',
                    label:'已发货'
                },
            ],
            orderStatusList:"",
            orderStatusListArray:[
                {
                    value:'待支付',
                    label:'待支付'
                },
                {
                    value:'支付中',
                    label:'支付中'
                },
                {
                    value:'支付成功',
                    label:'支付成功'
                },
                {
                    value:'已取消',
                    label:'已取消'
                },
                {
                    value:'已关闭',
                    label:'已关闭'
                },
                {
                    value:'已退款',
                    label:'已退款'
                },
                {
                    value:'订单已完成',
                    label:'订单已完成'
                },
            ],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        requestInfo(){
            let startTime="";
            let endTime="";
            if(this.time){
                startTime = this.time[0];
                endTime = this.time[1];
            }
            this.tableLoading=true;
            this.postRequest("/api/background/order_info/query", {
                customerId:this.customerId,
                customerNaendTimeme:this.customerName, 
                receiverPhone:this.receiverPhone,
                startTime:startTime,
                endTime:endTime,
                orderStatusList:this.orderStatusList,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        customerId:this.customerId,
                        customerName:this.customerName,
                        receiverPhone:this.receiverPhone,
                        startTime:startTime,
                        endTime:endTime,
                        orderStatusList:this.orderStatusList,
                    }
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        edit(item){
            orderId=item.orderId;
            this.dialog=item;
            this.dialogShow=true;
        },
        refund(item){
            this.$confirm("此操作将退款该订单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
            this.tableLoading=true;
            this.getRequest("/api/background/order_info/refund?orderId="+item.orderId).then(resp => {
                this.tableLoading=false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.initData();
                }
            });
            })
            .catch(() => {});
        },
        sure(){
            this.dialogLoading=true;
            this.postRequest("/api/background/order_info/update", {
                orderId:orderId,
                deliveryStatus:this.dialog.deliveryStatus, 
            })
            .then(resp => {  
                this.dialogLoading=false;
                if (resp && resp.data.status == 200){
                    this.common.showToast("success", resp.data.msg);
                    this.dialogShow=false;
                    this.initData();
                }
            });
        },
        exports(){
            this.exportLoading=true;
            console.log(searchInfo)
            var address=`/api/background/order_info/export?customerName=${searchInfo.customerName}&&customerId=${searchInfo.customerId}&&receiverPhone=${searchInfo.receiverPhone}&&startTime=${searchInfo.startTime}&&endTime=${searchInfo.endTime}`
            this.common.downloadFile(address); 
            setTimeout(() => {
                this.exportLoading=false;
            }, 3000);
        }
    }
}
</script>
<style scoped>
.el-row {
  margin: 20px 0;
}
.el-col {
  min-height: 50px;
  line-height: 50px;
  text-align: left;
}
.el-input{
    width: 70%;
}
.ql-snow.ql-toolbar{
    position: absolute !important;
    background-color: #fff !important;
    z-index: 2 !important;
    top: 0;
}
</style>
